<!--手工出库-->
<template>
  <div>
    <!--手工出库Modal（第一个弹框）-->
    <cus-modal
      ref="modal"
      :showFullscreen="true"
      title="手工出库"
      :width="1550"
      style="height: 500px"
    >
      <cus-search style="margin: -30px 0 0 0">
        <cus-search-item>
          <div class="itemBox">
            <div>
              <Form>
                <FormItem
                  label="仓库"
                  :label-width="50"
                  class="mb_20"
                  prop="stockId"
                >
                  <Select
                    placeholder="全部"
                    clearable
                    v-model="form.stockId"
                    @on-change="postApiGoodsOuthandaworkListApi()"
                    style="width: 200px"
                  >
                    <Option :value="-1">全部</Option>
                    <Option
                      v-for="item in storehouseTree"
                      :value="item.id"
                      :key="item.id"
                      >{{ item.name }}</Option
                    >
                  </Select>
                </FormItem>
              </Form>
            </div>
            <div class="itemBox_right">
              <cusButton
                class="mr_20 mb_20"
                type="primary"
                @onClick="onAddDetails()"
                style="width:150px;"
                >添加明细</cusButton
              >
              <cusButton
                :disabled="data.length == 0"
                class="mb_20"
                type="primary"
                @onClick="onSave()"
                style="width:150px;"
                >保存</cusButton
              >
            </div>
          </div>
        </cus-search-item>
      </cus-search>
      <Table
        border
        :loading="loading"
        :columns="columns"
        :data="data"
        height="500"
        :size="vuex_config.tableSize"
      >
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <!-- <cus-button
              type="text"
              size="small"
              :style="{ color: '#1E6FFF' }"
              style="padding: 0 5px"
              @onClick="onEdit(row)"
            >
              <Icon
                type="md-color-filter"
                size="4"
                style="margin: 2px 5px 0 0"
              />
              <span>编辑</span>
            </cus-button> -->
            <cus-button
              type="text"
              size="small"
              :style="{ color: '#FF4746' }"
              style="padding: 0 5px"
              @onClick="onDelete(row)"
            >
              <Icon
                type="ios-trash-outline"
                size="4"
                style="margin: 2px 3px 0 0"
              />
              <span>删除</span>
            </cus-button>
          </div>
        </template>
      </Table>
      <div class="mt_10">
        <cus-page
          :data="pages"
          class="mt_10 flex_jd"
          @pageChange="postApiGoodsOuthandaworkListApi()"
        ></cus-page>
      </div>
      <div slot="footer">
        <slot name="footer">
          <div class="modal-footer">
            <cus-button size="small" class="mr_2" @onClick="onCancel"
              >取消</cus-button
            >
            <!-- <cus-button type="primary" size="small" @onClick="onCancel"
              >确认</cus-button
            > -->
          </div>
        </slot>
      </div>
    </cus-modal>
    <!--手工出库物资登记Modal（第二个弹框） -->
    <outboundRegistration
      ref="outboundRegistration"
      :flag="false"
    ></outboundRegistration>
  </div>
</template>

<script>
import {
  postApiGoodsOuthandaworkList,
  postApiGoodsOuthandaworkDelete,
  postApiGoodsOuthandaworkSaveoutstockbill,
  getBasstockList
} from "@/api/business/manager";

import outboundRegistration from "./outboundRegistration.vue";
const form = {
  id: "",
  supplierName: "", // 供应商名称
  purchasingPlanName: "", // 采购计划名称
  week: "", // 供应时间节点value值
  stockId: "" // 仓库id
};
const columns = [
  {
    title: "序号",
    type: "index",
    width: 70,
    align: "center"
  },
  {
    title: "物资名称",
    key: "name",
    minWidth: 70,
    align: "center"
  },
  {
    title: "物资类型",
    key: "productClass",
    minWidth: 70,
    align: "center"
  },
  {
    title: "出库数量",
    key: "packagingQty",
    minWidth: 70,
    align: "center"
  },
  {
    title: "单位重量(Kg)",
    key: "unitWeight",
    minWidth: 80,
    align: "center"
  },
  {
    title: "计量单位",
    key: "packagingUtil",
    minWidth: 70,
    align: "center"
  },
  {
    title: "单价(元)",
    key: "packagingPrice",
    minWidth: 70,
    align: "center"
  },
  {
    title: "金额(元)",
    key: "amount",
    minWidth: 70,
    align: "center"
  },
  {
    title: "存储仓库",
    minWidth: 70,
    align: "center",
    render: (h, params) => {
      return h("div", [h("span", {}, params.row.basStock.name)]);
    }
  },
  {
    title: "创建时间",
    key: "createTime",
    minWidth: 145,
    align: "center"
  },
  {
    title: "是否自产",
    key: "isProduced",
    align: "center",
    minWidth: 80,
    render: (h, params) => {
      return h("div", [
        h("span", {}, params.row.isProduced == 0 ? "是" : "否")
      ]); //0:是,1:否
    }
  },
  {
    title: "操作",
    slot: "operation",
    minWidth: 145,
    fixed: "right",
    align: "center"
  }
];

export default {
  components: { outboundRegistration },
  data() {
    return {
      loading: false,
      form, // 手工入库form表单
      columns, // 手工入库表头
      data: [], // 手工入库表数据
      storehouseTree: [], // 仓库tree数据
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      }
    };
  },

  mounted() {},
  methods: {
    show() {
      this.loading = false;
      this.$refs["modal"].show = true;
      this.getBasstockListApi();
      this.postApiGoodsOuthandaworkListApi();
    },
    // 手工出库-保存
    onSave() {
      this.postApiGoodsOuthandaworkSaveoutstockbillApi();
    },
    // 手工出库-添加明细
    onAddDetails() {
      this.$refs["outboundRegistration"].show();
      this.$refs["outboundRegistration"].isEdit = false; // 判断添加true/编辑接口false
      this.$refs["outboundRegistration"].form.stockId = this.form.stockId;
      this.$refs["outboundRegistration"].storehouseTree = this.storehouseTree;
    },
    // 编辑明细
    onEdit(row) {
      console.log('zzz',row);
      this.$refs[
        "outboundRegistration"
      ].getGoodsSelectBasSpecificationListApi(); // 获取规格select数据
      this.$refs["outboundRegistration"].showForm.packagingUtil = JSON.parse(
        JSON.stringify(row.packagingUtil)
      ); // 规格
      this.$refs["outboundRegistration"].showForm.unitWeight = JSON.parse(
        JSON.stringify(row.unitWeight)
      ); // 单位重量
      this.$refs["outboundRegistration"].showForm.packagingQty = JSON.parse(
        JSON.stringify(row.packagingQty)
      ); // 库存重量
      // this.$refs["outboundRegistration"].showForm.packagingRealQty = JSON.parse(
      //   JSON.stringify(row.packagingRealQty)
      // ); // 已领用未记账数量
      this.$refs["outboundRegistration"].showForm.packagingPrice = JSON.parse(
        JSON.stringify(row.packagingPrice)
      ); // 价格
      this.$refs["outboundRegistration"].showForm.id = JSON.parse(
        JSON.stringify(row.id)
      );
      // this.$refs["outboundRegistration"].showForm.packagingRealQty = JSON.parse(JSON.stringify(row.packagingRealQty)); //已领用未记账数量
      this.$refs["outboundRegistration"].showForm.stockId = row.stockId;
      this.$refs["outboundRegistration"].showForm.productName = JSON.parse(
        JSON.stringify(row.product.name)
      ); // 物资名称
      this.$refs["outboundRegistration"].showForm.productId = JSON.parse(
        JSON.stringify(row.productId)
      ); // 商品id
      this.$refs["outboundRegistration"].showForm.poinventroyId = JSON.parse(
        JSON.stringify(row.poinventroyId)
      ); // 物资id
      // this.$refs["outboundRegistration"].showForm.outWeight = JSON.parse(
      //   JSON.stringify(row.packagingQty)
      // );
      // 出库重量 recipientsWay=1按重量计算,recipientsWay=0按规格计算,
      this.$refs["outboundRegistration"].isEdit = true; // 判断,添加 false/编辑接口true
      if (row.packagingUtil == "公斤" || row.packagingUtil == "斤") {
        this.$refs["outboundRegistration"].flagModal = true; //如果规格为公斤和斤默认显示重量(公斤,斤)
        // this.$refs["outboundRegistration"].isFlagModal = true; //用于判断选中规格后展示重量还是数量
      } else {
        this.$refs["outboundRegistration"].flagModal = false; //如果规格不为公斤和斤默认显示数量(箱,件)
        // this.$refs["outboundRegistration"].isFlagModal = false; //用于判断选中规格后展示重量还是数量
      }
      this.$refs["outboundRegistration"].showModal = true;
      //this.$refs["outboundRegistration"].updateGoodsPoinventroyInfoApi(); // 编辑出库量获取库存重量
      console.log(row);
    },
    // 删除明细
    onDelete(row) {
      this.$cu
        .dialog({
          params: row
        })
        .then(({ id }) => {
          this.postApiGoodsOuthandaworkDeleteApi(id);
        });
    },
    // 模态框取消
    onCancel() {
      this.$refs["modal"].onCancel();
    },
    // 手工出库列表---------------------接口
    postApiGoodsOuthandaworkListApi() {
      return new Promise(resolve => {
        let params = {
          current: this.pages.page,
          size: this.pages.pageSize,
          stockId: this.form.stockId
        };
        postApiGoodsOuthandaworkList(params).then(res => {
          if (res.retCode == 2000) {
            res.data.records.forEach(element => {
              element.name = element.product.name;
              element.productClass = element.product.productClass;
            });
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
          }
          resolve();
        });
      });
    },
    // 手工出库列表删除添加出库数据-------接口
    postApiGoodsOuthandaworkDeleteApi(id) {
      return new Promise(resolve => {
        postApiGoodsOuthandaworkDelete({
          id: id
        }).then(res => {
          if (res.retCode == 2000) {
            this.$Message.success(res.retMsg);
            this.postApiGoodsOuthandaworkListApi();
          }
          resolve();
        });
      });
    },
    // 手工出库列表保存出库数据----------------接口
    postApiGoodsOuthandaworkSaveoutstockbillApi() {
      return new Promise(resolve => {
        postApiGoodsOuthandaworkSaveoutstockbill().then(res => {
          if (res.retCode == 2000) {
            this.$Message.success(res.retMsg);
            this.$parent.postApiGoodsOutStockBillListApi();
            this.$refs["modal"].show = false;
          }
          resolve();
        });
      });
    },
    // 物资仓库列表---------接口
    getBasstockListApi() {
      return new Promise(resolve => {
        let params = {
          current: 1,
          size: 1000
        };
        getBasstockList(params).then(res => {
          if (res.retCode == 2000) {
            this.storehouseTree = res.data.records;
            resolve();
          }
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.itemBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .itemBox_right {
    display: flex;
  }
}
</style>
